<template>
    <el-table
        id="categoryreport-table-categoryreport"
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="id"
        table-layout="auto"
        @row-dblclick="rowDbClick"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :formatter="col.formatter"
                :type="col.type"
                :fixed="col.fixed"
                :width="col.width"
            >
            </el-table-column>
        </template>
    </el-table>
    <el-dialog
        v-model="dialogDetailVisible"
        title="资金账号流水"
        draggable
        destroy-on-close
        :center="true"
        width="90%"
    >
        <CategoryDetail
            :category_id="paramData.categoryID"
            :month="paramData.month"
            
        >
        </CategoryDetail>
    </el-dialog>
</template>
<script setup lang="ts" name="CategoryReport">
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import {
    tableDefaultAttribute,
    
    tableColumnDefault,
} from '@/hooks/useTable';
import { Request } from '@/app/request';
import { CategoryReportModel } from '@/common/types/report';
import { TableColumn } from '@/common/types/app';
import { transFormatter } from '@/common/tools';
import { useAppStore } from '@/store/app';
import { BusiReportParam } from '@/common/types/report';
import CategoryDetail from './CategoryDetail.vue';
const dialogDetailVisible = ref(false);
const paramData = reactive<{
    month?: Date,
    categoryID?: number
}>({});
const { category, currency}  = storeToRefs(useAppStore());
const tableData = ref<Array<CategoryReportModel>>([]);
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'category') {
        data = category.value;
    } else if (column['property'] === 'currency_cod') {
        data = currency.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'category',
        label: '资金账号',
        formatter: onFormatter,
        width: 300,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'currency_cod',
        label: '货币',
        formatter: onFormatter,
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'month_add',
        label: '本期增加',
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'month_reduce',
        label: '本期减少',
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 5,
        prop: 'surplus',
        label: '余额',
        width: 120,
    },
]);
const refresh = ref( async (param: BusiReportParam) => {
    // console.log('category报表');
    Object.assign(paramData, param);
    const req = new Request('银行存款月表', {
        month: param.month
    });
    const r = await req.post();
    tableData.value.length = 0;
    if (r.code > 100) {
        tableData.value = r.obj;
    }
    // console.log(month);
    
});
const rowDbClick = async (row: CategoryReportModel, column: any, event: Event) => {
    paramData.categoryID = row.category;
    dialogDetailVisible.value = true;
}
const onCloseDialog = async (arg: any) => {
    if (dialogDetailVisible.value) {
        dialogDetailVisible.value = false;
    }
  
};
defineExpose({
    refresh
})
</script>
<style lang="scss" scoped></style>
